﻿@* ReSharper disable UnknownCssClass *@

@using OpusSuite.Extensions
@model OpusSuite.ViewModels.AccountAdmin.UserProfileModel
@{
    ViewBag.Title = ""; @* "User Profile";*@
}

<link href="@Url.Content("~/Content/themes/south-street/jquery.ui.combogrid.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/themes/south-street/FormToWizard.less.css")" rel="stylesheet" type="text/css" />

<script src="@Url.Content("~/Scripts/jquery.ui.combogrid-1.6.2.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/opusAutoComplete.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/Select/CountrySelect.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/Wizards/FormToWizard.js")" type="text/javascript"></script>

<div id="applicationMessagesFirstTime">@Html.Partial("ApplicationMessages", "FirstTime")</div>

<header>
<h1>@ViewBag.Title</h1>
<br/>
<h2>@*First time wizard*@</h2>
</header>
<br/>
<br/>

@using (Html.BeginForm("FirstTime", "AccountAdmin", FormMethod.Post, new { id = "profileForm" }))
{
    <fieldset class="wizard">
        <legend></legend>
        <div class="wizardPage">
            <h2>Welcome!</h2>
            <p>Welcome to the first run wizard.</p>
            <p>Please click on Next to continue setting up Opus Suite.</p>
            <p>At all times the Previous and Next buttons will be available to navigate through the wizard.</p>
        </div>
    </fieldset>

    <fieldset class="wizard">
        <legend></legend>
        <div class="wizardPage">
        <table class="table-editor">
            <tr>
                <td class="td-horiz-label">@Html.LabelFor(model => model.UserName, new { @class = "label-horiz" })
                </td>
                <td class="td-horiz-field">@Html.TextBoxFor(model => model.UserName, new { @class = "editor-horiz ui-state-disabled", @disabled = "disabled" })
                </td>
            </tr>
            <tr>
                <td class="td-horiz-label">@Html.LabelFor(model => model.DisplayName, new { @class = "label-horiz" })
                </td>
                <td class="td-horiz-field">@Html.TextBoxFor(model => model.DisplayName, new { @class = "editor-horiz validate[required]" })
                </td>
            </tr>
            <tr>
                <td class="td-horiz-label">@Html.LabelFor(model => model.CurrentPassword, new { @class = "label-horiz" })
                </td>
                <td class="td-horiz-field">@Html.PasswordFor(model => model.CurrentPassword, new { @class = "editor-horiz validate[required]" })
                </td>
            </tr>
            <tr>
                <td class="td-horiz-label">@Html.LabelFor(model => model.NewPassword, new { @class = "label-horiz" })
                </td>
                <td class="td-horiz-field">@Html.PasswordFor(model => model.NewPassword, new { @class = "editor-horiz validate[required]" })
                </td>
            </tr>
            <tr>
                <td class="td-horiz-label">@Html.LabelFor(model => model.ConfirmPassword, new { @class = "label-horiz" })
                </td>
                <td class="td-horiz-field">@Html.PasswordFor(model => model.ConfirmPassword, new { @class = "editor-horiz validate[required]" })
                </td>
            </tr>
        </table>
        </div>
    </fieldset>

    <fieldset class="wizard">
        <legend></legend>
        <div class="wizardPage">
        <table class="table-editor">
            <tr>
                <td class="td-horiz-label">@Html.LabelFor(model => model.CountryDescription, new { @class = "label-horiz" })
                </td>
                <td class="td-horiz-field">
                    <span>
                    <input id="Country" data-opus-id="@(Model.CountryId)" class="editor-horiz searchInput validate[required]" value="@(Model.CountryDescription)" />
                    <a class="searchButton" href="#" id="btnCountry"></a>
                    </span>
                </td>
            </tr>
        </table>
        </div>
    </fieldset>

    <fieldset class="wizard">
        <legend></legend>
        <div class="wizardPage">
        <table class="table-editor">
            <tr>
                <td class="td-horiz-label">@Html.LabelFor(model => model.ThemeName, new { @class = "label-horiz" })
                </td>
                <td class="td-horiz-field">
                    <select class="editor-horiz" id="Theme" name="Theme">
                        @foreach (var item in ViewBag.Themes)
                        {
                            if (@item.Id == @Model.ThemeId)
                            {
                                <option value="@item.Id" selected="selected">@item.Name</option>
                            }
                            else
                            {
                                <option value="@item.Id">@item.Name</option>
                            }
                        }
                    </select>
                </td>
            </tr>
        </table>
        </div>
    </fieldset>
    
    <fieldset class="wizard">
        <legend></legend>
        <div class="wizardPage">
        <table class="table-editor">
        @foreach (var item in Model.Settings)
        {
            <tr>
                @if (@item.IsBoolean)
                {
                    <td class="td-horiz-label">@Html.Label(EnumExt.GetDescription(@item.Type), new { @class = "label-horiz" })</td>
                    <td class="td-horiz-field">@Html.CheckBox(@item.Type.ToString(), (@item.Value == "Yes"), new { @class = "opusSetting editor-horiz validate[required]" })</td>
                }
            </tr>
        }
        </table>
        </div>
    </fieldset>

        <fieldset class="wizard">
        <legend></legend>
        <div class="wizardPage">
            <h2>Finished!</h2>
            <p>Please click on the Finish button to save your changes and be redirected to your default dashboard.</p>
            <p>Alternatively you can click on the Previous button to make any changes before saving.</p>
        </div>
        <p><a id="saveButton" style="float: right">Finish</a></p>
    </fieldset>

    <div id="dialogCountry" title="" style="overflow: hidden;">
    </div>
}
@* ReSharper restore UnknownCssClass *@

@* ReSharper disable UnusedParameter *@
<script type="text/javascript">
    $(function() {
        ////////////////////////////////////////////////////////////////////////////////////
        // Country
        $("#dialogCountry").selectCountry('init', {
            'btn': 'btnCountry',
            'AutoCompleteElement': 'Country',
            'ApplicationMessagesPartial': 'applicationMessagesUserProfile',
            'InputElement': 'Country'
        });

        ////////////////////////////////////////////////////////////////////////////////////
        // Form
        $("#saveButton").click(function(e) {

            $("#profileForm").validationEngine('attach', { promptPosition: "topRight", autoPositionUpdate: true });

            if ($("#profileForm").validationEngine('validate')) {
                $("#progressSpinner").progressSpinner('open', {
                    'title': '@OpusSuite.Globalisation.Resources.UICommon.ApplicationName' + ' - ' + '@(OpusSuite.Globalisation.Resources.UserProfile.SavingProfile)',
                    waitText: '@(OpusSuite.Globalisation.Resources.UserProfile.PleaseWait)'
                });

                $(document).oneTime(200, function() {
                    $("#profileForm").submit();
                });
            }
        });

        $("#profileForm").submit(function(e) {
            e.preventDefault();
            var profile = {
                UserName: $("#UserName").val(),
                DisplayName: $("#DisplayName").val(),
                CurrentPassword: $("#CurrentPassword").val(),
                NewPassword: $("#NewPassword").val(),
                ConfirmPassword: $("#ConfirmPassword").val(),
                ThemeId: $("#Theme").val(),
                ThemeName: '',
                CountryId: $("#Country").attr('data-opus-id'),
                CountryDescription: '',
                Settings: ''
            };

            $.each($('.opusSetting'), function() {
                // append to Settings
                profile.Settings.concat({ 'test': $(this).val() });
            });

            $.ajax({
                url: '/AccountAdmin/FirstTime',
                type: "POST",
                data: JSON.stringify(profile),
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                success: function(data) {
                    $("#progressSpinner").progressSpinner('closeWindow');
                    if (data) {
                        window.location.replace('@Url.Action("Dashboard", "AccountAdmin")');
                    } else {
                        $.get('/Shared/ApplicationMessages', { }, function(view) {
                            $("#applicationMessagesFirstTime").html(view);
                        });
                    }
                },
                //failure: function (data) {
                failure: function() {
                    $("#progressSpinner").progressSpinner('closeWindow');
                    $.get('/Shared/ApplicationMessages', { }, function(view) {
                        $("#applicationMessagesFirstTime").html(view);
                    });
                }
            });
        });

        $("#saveButton").button();

        // 1st Tab
        $("#UserName").opusTooltip({ title: '@OpusSuite.Globalisation.Resources.UICommon.Username', tip: '@OpusSuite.Globalisation.Resources.Logon.UserName_Tooltip' });
        $("#DisplayName").opusTooltip({ title: '@OpusSuite.Globalisation.Resources.UserProfile.DisplayName', tip: '@OpusSuite.Globalisation.Resources.UserProfile.DisplayName_Tooltip' });
        $("#CurrentPassword").opusTooltip({ title: '@OpusSuite.Globalisation.Resources.UserProfile.CurrentPassword', tip: '@OpusSuite.Globalisation.Resources.UserProfile.CurrentPassword_Tooltip' });
        $("#NewPassword").opusTooltip({ title: '@OpusSuite.Globalisation.Resources.UserProfile.NewPassword', tip: '@OpusSuite.Globalisation.Resources.UserProfile.NewPassword_Tooltip' });
        $("#ConfirmPassword").opusTooltip({ title: '@OpusSuite.Globalisation.Resources.UserProfile.ConfirmPassword', tip: '@OpusSuite.Globalisation.Resources.UserProfile.ConfirmPassword_Tooltip' });

        // 2nd Tab
        $("#Country").opusTooltip({ title: '@OpusSuite.Globalisation.Resources.UserProfile.Country', tip: '@OpusSuite.Globalisation.Resources.UserProfile.Country_Tooltip' });

        // 3rd Tab
        $("#Theme").opusTooltip({ title: '@OpusSuite.Globalisation.Resources.UserProfile.Theme', tip: '@OpusSuite.Globalisation.Resources.UserProfile.Theme_Tooltip' });

        // 4th Tab
        $("#ShowTooltips").opusTooltip({ title: '@OpusSuite.Globalisation.Resources.UserProfile.ShowTooltips', tip: '@OpusSuite.Globalisation.Resources.UserProfile.ShowTooltips_Tooltip' });

        // The steps array for the wizard
        var steps = [
        {
            Caption: 'Welcome',
            FirstField: null
        },
        {
            Caption: 'Change Password',
            FirstField: 'DisplayName'
        },
        {
            Caption: 'Set Language',
            FirstField: 'Country'
        },
        {
            Caption: 'Set Theme',
            FirstField: 'Theme'
        },
        {
            Caption: 'Optional Settings',
            FirstField: 'Tooltips'
        },
        {
            Caption: 'Finished',
            FirstField: null
        }
        ];
    
        $("#profileForm").formToWizard({
            submitButton: 'saveButton',
            strict: true,
            stepsArray: steps
        });

        $("#DisplayName").focus();
    });
</script>
@* ReSharper restore UnusedParameter *@
